<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>基本使用</title>
		<script src="../../JS/vue.js"></script>
	</head>
	<body>
		<!-- 
         Vue中使用组件的三大步骤:
                一、定义组件(创建组件)
                二、注册组件
                三、使用组件(写组件标签)
         一、如何定义一个组件？
              使用Vue.extend(options)创建,其中options和new Vue(options)时传入的那个options几乎一样，但区别如下:
               1、el不要写,为什么？
                  -- 最终所有组件都要经过一个vm管理,由vm中的el
                  决定服务那个容器
               2、data必须写成函数,为什么？
                  -- 避免组件被复用时,数据存在引用关系。
                  备注：使用template可以配置组件结构。
         二、如何注册组件？
                1、局部注册:靠new Vue的时候传入compnents选项
                2、全局注册:靠Vue.component('组件名',组件)                
         三、编写组件标签:
                <school></school>      
         -->
		<div id="root">
			<h1>{{msg}}</h1>
			<hr />
			<!-- 第三步:编写组件标签 -->
			<school></school>
			<hr />
			<!-- 第三步:编写组件标签 -->
			<student></student>
		</div>
		<script>
			Vue.config.productionTip = false //阻止 vue 在启动时产生提示

			//第一步 创建school组件
			const school = Vue.extend({
				template: `
                <div>
                    <h2>学校名称:{{name}}</h2>
			        <h2>学校地址:{{address}}</h2>  
                </div>
                `,
				// el: '#root',
				//组件定义时 一定不要写el配置项,因为最终
				// 所有的组件都要被一个vm管理,由vm决定
				// 服务于哪个容器。
				data() {
					return {
						name: '尚学堂',
						address: '赛蒂科技园'
					}
				}
			})
			//第一步 创建student组件
			const student = Vue.extend({
				template: `
                <div>
                    <h2>学生姓名:{{name}}</h2>
			        <h2>学生年龄:{{age}}</h2>
                </div>
                `,
				// el: '#root',
				//组件定义时 一定不要写el配置项,因为最终
				// 所有的组件都要被一个vm管理,由vm决定
				// 服务于哪个容器。
				data() {
					return {
						name: '张三',
						age: 22
					}
				}
			})

			// 创建vm
			new Vue({
				el: '#root',
				// 第二步:注册组件(局部注册)
				data: {
					msg: '你好组件'
				},
				components: {
					school,
					student
				}
			})
		</script>
	</body>
</html>
